<template>
	<view class="set-password-content">
		<u-navbar :is-back="true" title="设置密码"></u-navbar>
		<u-form :model="form" ref="uForm" :error-type="errorType">
			<u-form-item label="密码" label-align="center" prop="password" label-width="150">
				<u-input v-model="form.password" type="password" placeholder="请输入密码"></u-input>
			</u-form-item>
			<u-form-item label="确认密码" prop="verifyPassword" label-width="150">
				<u-input v-model="form.verifyPassword" type="password" placeholder="请确认密码"></u-input>
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="submit">完成注册</u-button>

		<!-- 以下为注册时，必要的其他弹出组件 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单填写错误的提示形式
				errorType: ['message'],
				form: {
					password: '',
					verifyPassword: '',
				},
				// 表单验证的校验规则
				rules: {
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change', 'blur'],
						}
					],
					verifyPassword: [{
							required: true,
							message: '请重新输入密码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.form.password;
							},
							message: '两次输入的密码不一致',
							trigger: ['change', 'blur'],
						}
					],
				},
			}
		},
		onLoad(option) {
			let value = uni.getStorageSync('UserMsg');
			console.log(value);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let localValue = uni.getStorageSync('UserMsg');
						uni.setStorage({
							key: 'UserMsg',
							data: {
								Token: localValue.Token,
								campusLabel: localValue.campusLabel,
								collegeLabel: localValue.collegeLabel,
								majorLabel: localValue.majorLabel,
								clazzLabel: localValue.clazzLabel,
								// 学号
								StuID: localValue.StuID,
								// 学生姓名
								studentName: localValue.studentName,
								// 性别
								gender: localValue.gender,
								email: localValue.email,
								password: this.$data.form.password
							},
							success: function() {
								console.log('success');

							},
							complete: function() {
								let localValue = uni.getStorageSync('UserMsg');
							}
						});
						this.$u.post('/user/register/student', {
							college: localValue.collegeLabel,
							major: localValue.majorLabel,
							clazz: localValue.clazzLabel,
							id: localValue.StuID,
							name: localValue.studentName,
							gender: localValue.gender,
							qqEmail: localValue.email,
							password: this.$data.form.password
						}).then(res => {
							let code = res.statusCode;
							if (code !== 0) {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error',
									icon: false,
									position: 'bottom'
								});
							} else {
								this.$u.route({
									type: 'navigateTo',
									url: '/pages/login/index'
								});
							}
							console.log(res);
						});
					} else {
						console.log('未通过');
					}
				})
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	/* 整个注册页面加了美化效果 */
	.set-password-content {
		margin: 0rpx 50rpx;
	}
</style>
